<!--  -->
<template>
  <div class="redact">
    <div class="img">
      <!-- 小程序公告图标 -->
      <div class="icon_img">
        <span class="text">直播封面图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload_one"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- 个人中心背景图 -->
      <div class="icon_img">
        <span class="text">直播分享图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess_one"
          :before-upload="beforeAvatarUpload_two"
        >
          <img v-if="imageUrl_one" :src="imageUrl_one" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="adduser">
        <!-- 添加公告内容 -->
        <div class="content">
          <span class="text">直播间名称：</span>
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1" @blur="textarea1 = publick.clearinput(textarea1)"></el-input>
        </div>
        <div class="content">
          <span class="text">直播时间段：</span>
          <date-picker-two @fromChild="getChilddpone"></date-picker-two>
        </div>

        <div class="content">
          <span class="text">课程名：</span>
          <!-- <el-select v-model="values" :options="options" @change="handleChange"></el-select> -->
          <el-select v-model="values" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="content">
          <span class="text">主播昵称：</span>
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="remake" @blur="remake = publick.clearinput(remake)"></el-input>
        </div>
        <!-- 显示状态 -->
        <div class="content">
          <span class="text">直播间类型：</span>
          <el-switch
            style="display: block"
            v-model="types"
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
            active-text="推流"
            inactive-text="手机直播"
          ></el-switch>
        </div>
        <div class="content">
          <span class="text">屏幕方位：</span>
          <el-switch
            style="display: block"
            v-model="screenType"
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
            active-text="横屏"
            inactive-text="竖屏"
          ></el-switch>
        </div>
        <div class="content">
          <span class="text">是否关闭点赞：</span>
          <el-switch
            style="display: block"
            v-model="closeLike"
            active-color="#13ce66"
            active-value="0"
            inactive-value="1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </div>
        <div class="content">
          <span class="text">是否关闭货架：</span>
          <el-switch
            style="display: block"
            v-model="closeGoods"
            active-color="#13ce66"
            active-value="0"
            inactive-value="1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </div>
        <div class="content">
          <span class="text">是否关闭评论：</span>
          <el-switch
            style="display: block"
            v-model="closeComment"
            active-color="#13ce66"
            active-value="0"
            inactive-value="1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </div>
        <div class="content">
          <span class="text">主播微信号：</span>
          <el-input type="text" placeholder="请输入视频链接" v-model="video" @blur="video = publick.clearinput(video)"></el-input>
        </div>
      </div>
      <button class="but" @click="submit()">确认添加</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import DatePickerTwo from "../../../components/screen/DateTimePicker";
export default {
  data() {
    return {
      // 本地路径图片
      imageUrl: "", //公告图标
      imageUrl_one: "", //个人中心背景图
      datas: {},
      options: [],
      values: "",
      closeGoods: "",
      closeComment: "",
      placeholders: "请输入内容", //select框中的placehould
      // 以下是返回后台的图片网络路径
      img_gg: "", //公告图标
      cover_img_id: "",
      img_myself: "", //个人中心图
      share_img_id: "",
      type: "addcourse", //列表标识
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      token: {
        token: this.publick.token()
      },
      textarea1: "", //课程名称
      types: "",
      screenType: "",
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      closeLike: "",
      money: "",
      class_hour: "",
      add_num: "",
      starttime: "", //搜索起始时间
      endtime: "", //搜索结束时间
      user_id: "",
      course_cate_id: [],
      video: "",
      sort: "",
      remake: "",
      content: "",
      is_user: false, //是否选择用户列表
      api: "https://api.xujiangyu.com/admin" //上传图片域名
    };
  },
  components: { DatePickerTwo },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // 直播用户列表
    this.$api
      .anchorList({
        token: this.publick.token()
      })
      .then(res => {
        console.log(res);
        this.tableData = res.data;
      })
      .catch(res => {
        console.log(res);
      });
    this.getCoursecateList();
    let header_name = ["图像", "昵称"]; //列表头部
    let list_content = ["avatar", "nickName"]; //列表渲染内容字段
    for (let key in this.tableData[0]) {
      list_content.push(key);
    }
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
    console.log(this.listHeader);
  },
  methods: {
    //   二级分类名
    handleChange(value) {
      console.log(value);
      this.course_cate_id = value;
    },
    //获取时间
    getChilddpone(v) {
        console.log(v);
      if (v != null) {
        this.starttime = v[0];
        this.endtime = v[1];
      } else {
        this.starttime = "";
        this.endtime = "";
      }
    },
    //获取课程名分类
    getCoursecateList() {
      this.$api
        .liveCourseList({
          token: this.publick.token()
        })
        .then(res => {
          console.log(res);
          let datas = res.data.data;
          datas.forEach(e => {
            let obj = {};
            obj.value = e.course_id;
            obj.label = e.course_name;
            this.options.push(obj);
          });
        })
        .catch(res => {
          console.log(res);
        });
    },
    //   四张图片上传成功是函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_one(res, file) {
      this.imageUrl_one = URL.createObjectURL(file.raw);
    },
    // 四张图片上传之前的函数
    beforeAvatarUpload_one(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios.post(this.api + "/upimage", param, config).then(response => {
        console.log(response);
        this.img_gg = response.data.data.images;
        this.cover_img_id = response.data.data.images_id;
      });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    beforeAvatarUpload_two(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios.post(this.api + "/upimage", param, config).then(response => {
        this.img_myself = response.data.data.images;
        this.share_img_id = response.data.data.images_id;
      });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    // 点击提交按钮事件
    submit() {
     
      this.$api
        .liveroomAdd({
          token: this.publick.token(),
          startTime: this.starttime,
          endTime: this.endtime,
        //   coverImg: this.img_gg,
        //   shareImg: this.img_myself,
          name: this.textarea1,
        //   anchorName: this.remake,
        //   anchorWechat: this.video,
        //   type: this.types,
        //   screenType: this.screenType,
        //   closeLike: this.closeLike,
        //   closeGoods: this.closeGoods,
        //   closeComment: this.closeComment,
          course_id: this.values
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.$router.push({
            path: "/live_list",
            query: {
              type: "addlist"
            }
          });
          this.course_cate_id = [];
          (this.img_gg = ""),
            (this.cover_img_id = ""),
            (this.img_myself = ""),
            (this.share_img_id = ""),
            (this.textarea1 = ""),
            (this.remake = ""),
            (this.content = ""),
            (this.video = ""),
            (this.types = ""),
            (this.screenType = ""),
            (this.closeLike = ""),
            (this.money = ""),
            (this.class_hour = ""),
            (this.add_num = ""),
            (this.datas.user_id = ""),
            (this.imageUrl = ""),
            (this.imageUrl_one = ""),
            (this.values = ""),
            (this.closeGoods = ""),
            (this.closeComment = ""),
            (this.datas = {});
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "amend") {
        this.is_user = false;
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.redact {
  background: #fff;
  width: 80%;
  margin: auto;
  height: 89vh;
  overflow: auto;
}
/* 上传图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.icon_img {
  display: flex;
  width: 50%;
  margin: auto;
  margin-top: 1vh;
  justify-content: flex-start;
  align-items: center;
}
.img {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3vh;
}
.flooter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10vh;
}
.color {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.but {
  display: flex;
  width: 30%;
  height: 5vh;
  background: #25d22d;
  color: #fff;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 10vh;
  outline: none;
}
.title {
  display: flex;
  flex-direction: column;
}
.texeS {
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 16px;
  min-width: 10%;
}
.userlist {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.userdata {
  width: 98%;
  min-height: 5vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.user_img {
  display: block;
  width: 10%;
}
.user_name {
  display: block;
  font-size: 16px;
  margin-left: 3%;
}
</style>